<template>
  <div>
   <!--  <van-nav-bar title="玻璃权益卡" /> -->
    <div class="wrap">
      <div class="base-info">
        车辆图片信息
        <span class="tip">（图片需清晰，如果模糊请重新拍摄）</span>
      </div>
      <van-cell-group inset class="custom-cell">
        <van-cell title="前脸照（带车牌）">
          <template #right-icon>
            <van-uploader
              :after-read="(flie) => afterRead(flie, 'frontImg')"
              v-if="!form.frontImg"
            >
              <van-button
                plain
                hairline
                size="small"
                color="#FBB215"
                round
                type="primary"
                >请拍照</van-button
              >
            </van-uploader>
          </template>
          <template #label>
            <van-badge v-if="form.frontImg">
              <img class="photo-style" :src="form.frontImg" alt="" />
              <template #content>
                <van-icon
                  @click="() => handleDelete('frontImg')"
                  name="cross"
                  class="badge-icon"
                />
              </template>
            </van-badge>
          </template>
        </van-cell>
        <van-cell title="车尾照（带车牌）">
          <template #right-icon>
            <van-uploader
              :after-read="(flie) => afterRead(flie, 'tailImg')"
              v-if="!form.tailImg"
            >
              <van-button
                plain
                hairline
                size="small"
                color="#FBB215"
                round
                type="primary"
                >请拍照</van-button
              >
            </van-uploader>
          </template>
          <template #label>
            <van-badge v-if="form.tailImg">
              <img class="photo-style" :src="form.tailImg" alt="" />
              <template #content>
                <van-icon
                  @click="() => handleDelete('tailImg')"
                  name="cross"
                  class="badge-icon"
                />
              </template>
            </van-badge>
          </template>
        </van-cell>
        <van-cell title="左侧面45°（带车牌）">
          <template #right-icon>
            <van-uploader
              :after-read="(flie) => afterRead(flie, 'leftImg')"
              v-if="!form.leftImg"
            >
              <van-button
                plain
                hairline
                size="small"
                color="#FBB215"
                round
                type="primary"
                >请拍照</van-button
              >
            </van-uploader>
          </template>
          <template #label>
            <van-badge v-if="form.leftImg">
              <img class="photo-style" :src="form.leftImg" alt="" />
              <template #content>
                <van-icon
                  @click="() => handleDelete('leftImg')"
                  name="cross"
                  class="badge-icon"
                />
              </template>
            </van-badge>
          </template>
        </van-cell>
        <van-cell title="右侧面45°（含车辆）">
          <template #right-icon>
            <van-uploader
              :after-read="(flie) => afterRead(flie, 'rightImg')"
              v-if="!form.rightImg"
            >
              <van-button
                plain
                hairline
                size="small"
                color="#FBB215"
                round
                type="primary"
                >请拍照</van-button
              >
            </van-uploader>
          </template>
          <template #label>
            <van-badge v-if="form.rightImg">
              <img class="photo-style" :src="form.rightImg" alt="" />
              <template #content>
                <van-icon
                  @click="() => handleDelete('rightImg')"
                  name="cross"
                  class="badge-icon"
                />
              </template>
            </van-badge>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <div>
              前档清晰照
              <span style="font-size: 8px" class="tip"
                >前档清晰照前挡玻璃占照片比例80—90%</span
              >
            </div>
          </template>
          <template #right-icon>
            <van-uploader
              :after-read="(flie) => afterRead(flie, 'frontPlace')"
              v-if="!form.frontPlace"
            >
              <van-button
                plain
                hairline
                size="small"
                color="#FBB215"
                round
                type="primary"
                >请拍照</van-button
              >
            </van-uploader>
          </template>
          <template #label>
            <van-badge v-if="form.frontPlace">
              <img class="photo-style" :src="form.frontPlace" alt="" />
              <template #content>
                <van-icon
                  @click="() => handleDelete('frontPlace')"
                  name="cross"
                  class="badge-icon"
                />
              </template>
            </van-badge>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- :disabled="Object.values(form).filter(item=> item).length !== 5" -->
      <div style="margin-top: 20px">
        <van-button
          @click="handleQuery"
          :disabled="Object.values(form).filter((item) => item).length !== 5"
          type="primary"
          color="#FBB215"
          round
          block
          >确定</van-button
        >
      </div>
      <div style="margin-top: 20px">
        <van-button
          type="primary"
          @click="router.push('/mobile/search')"
          color="#FBB215"
          plain
          hairline
          round
          block
          >取消</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//@ts-nocheck
import { uploadAvatar, createPolicy } from "@/apis/index";
import { ref, reactive } from "vue";
import { showToast } from "vant";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const form = reactive({
  frontImg: "",
  tailImg: "",
  leftImg: "",
  rightImg: "",
  frontPlace: "",
});

const afterRead = async (file, type) => {
  showToast("图片上传中，请耐心等待~");
  const res = await uploadAvatar({ file: file.file });
  form[type] = res.data;
};
const handleDelete = (type) => {
  form[type] = "";
};
const handleQuery = async () => {
  await createPolicy({ ...form, ...route.query });
  showToast("图片上传成功，请耐心等待审核~");
};
</script>

<style lang="scss">
.wrap {
  padding: 0 20px;
  box-sizing: border-box;
  // padding-top: 20px;
  .base-info {
    margin: 20px 0;
  }
  .custom-cell {
    margin: 0;
  }
  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 0px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .photo-style {
    width: 50px;
  }
}
</style>
